<template>
  <div class="app-container">
    <div class="header flex">
      <FormSearch :formFields="searchList" @search="Search" @reset="Search" />
    </div>
    <div class="footer">
      <a-tabs
        v-model:activeKey="state.searchParams.refund_status"
        @change="changeStatus"
      >
        <a-tab-pane
          :key="item.value"
          :tab="item.label"
          v-for="item in state.refundStatus"
        >
          <a-table
            :columns="columns"
            :data-source="state.data"
            style="width: 100%"
            rowKey="refund_id"
            :pagination="state.pagination"
            @change="pageChange"
            :loading="state.loading"
            :scroll="{ x: 1200 }"
          >
            <template #bodyCell="{ record, column }">
              <!-- 用户信息 -->
              <template v-if="column.dataIndex === 'userInfo'">
                <div>{{ record.user?.nickname }}</div>
                <div>{{ record.user?.mobile }}</div>
              </template>
              <!-- 商品信息 -->
              <template v-if="column.dataIndex === 'orderGoods'">
                <div class="flex gap">
                  <a-image
                    v-if="record.orderGoods?.goods_img"
                    :src="record.orderGoods?.goods_img"
                    :width="80"
                  />
                  <div class="good-name">
                    <a-tooltip>
                      <template #title>{{
                        record.orderGoods?.goods_name
                      }}</template>
                      {{ record.orderGoods?.goods_name }}
                    </a-tooltip>
                  </div>
                </div>
              </template>
              <template v-if="column.dataIndex === 'actions'">
                <a-space size="small">
                  <a-button type="link" @click="clickCheck(record)"
                    >详情</a-button
                  >
                </a-space>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
      <DetailsDrawer ref="details" @modal-success="refresh" />
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { list } from "@/api/refund";
import DetailsDrawer from "./DetailsDrawer.vue";

const details = ref();
const searchList = reactive([
  {
    type: "input",
    label: "售后单号",
    name: "refund_no",
    value: "",
    placeholder: "请输入售后单号",
  },
  {
    type: "input",
    label: "订单号",
    name: "order_no",
    value: "",
    placeholder: "请输入订单号",
  },
  {
    type: "select",
    label: "售后类型",
    name: "refund_type",
    value: null,
    placeholder: "请选择售后类型",
    allowClear: true,
    options: [
      {
        id: 1,
        name: "仅退款",
      },
      {
        id: 2,
        name: "退款退货",
      },
      {
        id: 3,
        name: "换货",
      },
    ],
  },
  {
    type: "input",
    label: "手机号",
    name: "mobile",
    value: "",
    placeholder: "请输入手机号",
  },
  {
    type: "select",
    label: "审核状态",
    name: "audit_status",
    value: null,
    placeholder: "请选择审核状态",
    allowClear: true,
    options: [
      {
        id: 0,
        name: "待审核",
      },
      {
        id: 1,
        name: "已通过",
      },
      {
        id: 2,
        name: "已驳回",
      },
    ],
  },
  {
    type: "select",
    label: "订单类型",
    name: "order_type",
    value: null,
    placeholder: "请选择订单类型",
    allowClear: true,
    options: [
      {
        id: 1,
        name: "普通",
      },
      {
        id: 2,
        name: "兑换",
      },
    ],
  },
  {
    type: "select",
    label: "退款状态",
    name: "refund_state",
    value: null,
    placeholder: "请选择退款状态",
    allowClear: true,
    options: [
      {
        id: 1,
        name: "已到账",
      },
      {
        id: 2,
        name: "未到账",
      },
    ],
  },
]);
const columns = [
  {
    title: "id",
    dataIndex: "refund_id",
    width: 100,
  },
  {
    title: "售后编号",
    dataIndex: "refund_no",
    width: 200,
  },
  {
    title: "用户信息",
    dataIndex: "userInfo",
    width: 180,
  },
  {
    title: "商品信息",
    dataIndex: "orderGoods",
    width: 300,
  },
  {
    title: "售后状态",
    dataIndex: "refund_status_name",
    width: 200,
  },
  {
    title: "退款金额",
    dataIndex: "order_price",
    customRender(record) {
      return "￥" + record.value;
    },
    width: 150,
  },
  {
    title: "申请时间",
    dataIndex: "create_time",
    width: 200,
  },
  {
    title: "处理时间",
    dataIndex: "update_time",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "actions",
    fixed: "right",
    width: 100,
  },
];
const state = reactive({
  refundStatus: [
    { value: 0, label: "全部" },
    {
      value: 1,
      label: "待寄回",
    },
    {
      value: 2,
      label: "待收货（平台）",
    },
    {
      value: 3,
      label: "待退款",
    },
    {
      value: 4,
      label: "退款中",
    },
    {
      value: 5,
      label: "已完成",
    },
    {
      value: 6,
      label: "已关闭",
    },
    {
      value: 7,
      label: "换货待寄出【平台】",
    },
    {
      value: 8,
      label: "换货待收货【用户】",
    },
  ],
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    refund_status: 0,
    page: 1,
    limit: 10,
  }, //搜索数据
});

//分页变动数据
const pageChange = (pagination) => {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  getList();
};
//获取列表的数据
const getList = () => {
  state.loading = true;
  list({
    ...state.searchParams,
  }).then(function (res) {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      state.loading = false;
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};
// 搜索
const Search = (values) => {
  state.searchParams.page = 1;
  state.searchParams = {
    ...state.searchParams,
    ...values,
  };
  getList();
};
const refresh = () => {
  getList();
};
const changeStatus = (activeKey) => {
  state.searchParams.refund_status = activeKey;
  state.searchParams.page = 1;
  getList();
};
// 查看详情
const clickCheck = (record) => {
  details.value.show(record);
};
getList();
</script>
<style scoped lang="scss">
@import "./index";
</style>